<template>
    <div class="main-my-profile-cards-add">
      <van-form @submit="onSubmit" :show-error-message="false" >
            <h3>Card number</h3>
            <van-field
                :style="{marginBottom: '35px'}"
                v-model="cardFrom.cardNum"
                name="cardNum"
                type="text"
                placeholder="Card number"
                label-width="1rem"
                :rules="[{ required: true, message: 'Card number is required'}]"
            >
            </van-field>
            <h3>Expiry Date</h3>
            <van-field
                :style="{marginBottom: '35px'}"
                v-model="cardFrom.expiry_date"
                name="expiry_date"
                type="text"
                placeholder="MM/YY"
                label-width="1rem"
                :rules="[{ required: true, message: 'Card number is required'}]"
            >
            </van-field>
            <h3>CCV</h3>
            <van-field
                :style="{marginBottom: '35px'}"
                v-model="cardFrom.ccv"
                name="ccv"
                type="password"
                placeholder="ccv"
                label-width="1rem"
                :rules="[{ required: true, message: 'Card number is required'}]"
            >
            </van-field>
        </van-form>
        <div class="btns">
            <van-button round block type="primary" class="btn"><strong>Add Card</strong></van-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch  } from 'vue'

const cardFrom = ref({
  cardNum: '',
  expiry_date: '',
  ccv: ''
})

const onSubmit = () => {

}
</script>

<style lang="less" scoped>
.main-my-profile-cards-add {
  padding: 40px 16px 0px 16px;
  h3 {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #6D3805;
    padding: 5px 0px;
    margin: 0px;
  }
  .btns {
    height: 80px;
    .btn {
        position: fixed;
        width: calc(100vw - 32px);
        margin: 0px 16px;
        bottom: 80px;
        left: 0px;
    }
  }
}
</style>
